<template>
  <el-dialog title="修改对象名称" v-model="isShowDialog"
             width="600" :close-on-click-modal="false">
    <el-form :model="ruleForm" :rules="rules"
             ref="ruleFormRef" size="default" label-width="70px">
      <el-form-item label="新名称" prop="fullName">
        <el-input v-model="ruleForm.fullName" placeholder="对象名称" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
				</span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import {reactive, toRefs, defineComponent, ref, unref} from 'vue';
import {ElMessage} from "element-plus"
import {remarkFile} from "/@/api/attachment";

export default defineComponent({
  name: 'attachmentRemarkFile',
  setup(props, {emit}) {
    const ruleFormRef = ref<HTMLElement | null>(null);
    const state = reactive({
      loading: false,
      isShowDialog: false,
      ruleForm: {
        id: undefined,
        fullName: ''
      },
      rules: {
        fullName: [
          {required: true, message: "文件名不能为空", trigger: "blur"},
        ]
      }
    });
    const openDialog = (_row: any) => {
      state.ruleForm = {
        id: _row.id,
        fullName: _row.fullName
      };
      state.isShowDialog = true;
    };
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    const onCancel = () => {
      closeDialog();
    };
    // 新增
    const onSubmit = () => {
      const formWrap = unref(ruleFormRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          state.loading = true;
          remarkFile(state.ruleForm).then(() => {
            ElMessage.success('备注对象名称成功');
            emit('callback');
            closeDialog();
          }).finally(() => {
            state.loading = false;
          })
        }
      })
    };
    return {
      ruleFormRef,
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      ...toRefs(state),
    };
  },
});
</script>
